<template>
  <div class="transactions-container">
    <!-- 顶部导航 -->
    <div class="header">
      <div class="back-button" @click="goBack">
        <van-icon name="arrow-left" size="20" />
      </div>
      <h1 class="header-title">交易记录</h1>
      <div class="filter-button" @click="showFilterPopup">
        <van-icon name="filter-o" size="20" />
      </div>
    </div>
    
    <!-- 交易统计卡片 -->
    <div class="stats-card">
      <div class="stats-header">
        <!-- <span class="stats-title">{{ selectedCurrency === 'all' ? '全部币种' : selectedCurrency }}</span> -->
        <div class="stats-tabs">
          <span 
            :class="['stats-tab', selectedType === 'all' ? 'active' : '']" 
            @click="selectType('all')"
          >
            全部
          </span>
          <span 
            :class="['stats-tab', selectedType === '1' ? 'active' : '']" 
            @click="selectType('1')"
          >
            充值
          </span>
          <span 
            :class="['stats-tab', selectedType === '2' ? 'active' : '']" 
            @click="selectType('2')"
          >
            提现
          </span>
        </div>
      </div>
    </div>
    
    <!-- 币种选择器 -->
    <div class="currency-selector">
      <div class="currency-scroll">
        <div 
          v-for="item in currencyOptions" 
          :key="item.value"
          :class="['currency-item', selectedCurrency === item.value ? 'active' : '']"
          @click="selectCurrency(item.value)"
        >
          <div class="currency-icon" v-if="item.value !== 'all'">{{ item.value.substring(0, 1) }}</div>
          <div class="currency-icon all-icon" v-else><van-icon name="apps-o" /></div>
          <span class="currency-name">{{ item.label }}</span>
        </div>
      </div>
    </div>
    
    <!-- 交易列表 -->
    <div class="transaction-list">
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <van-list
          v-model:loading="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <div 
            v-for="transaction in transactions" 
            :key="transaction.id"
            class="transaction-item"
            @click="showTransactionDetail(transaction)"
          >
            <div 
              class="transaction-icon" 
              :class="getIconClass(transaction.transType)"
            >
              <van-icon :name="getIconName(transaction.transType)" />
            </div>
            
          <div class="transaction-info">
            <div class="transaction-top">
              <span class="transaction-title">{{ getTransactionTitle(transaction.transType) }}</span>
              <span :class="['transaction-amount', getAmountClass(transaction.transType)]">
                {{ getAmountPrefix(transaction.transType) }}{{ formatNumber(transaction.amount) }} {{ transaction.currency }}
              </span>
            </div>
            
            <div class="transaction-middle" v-if="transaction.orderNo">
              <span class="transaction-order">订单: {{ formatOrderNo(transaction.orderNo) }}</span>
              <span class="transaction-hash" v-if="transaction.txHash">
                <van-icon name="link" /> {{ formatHash(transaction.txHash) }}
              </span>
            </div>
            
            <div class="transaction-bottom">
              <span class="transaction-date">{{ formatDateTime(transaction.createdAt) }}</span>
              <span :class="['transaction-status', getStatusClass(transaction.status)]">
                {{ getStatusText(transaction.status) }}
              </span>
            </div>
          </div>
          </div>
          
          <van-empty 
            v-if="transactions.length === 0 && !loading" 
            description="暂无交易记录" 
            image="search"
          />
        </van-list>
      </van-pull-refresh>
    </div>
    
    <!-- 筛选弹窗 -->
    <van-popup
      v-model:show="showFilter"
      position="bottom"
      round
      closeable
      close-icon="close"
      :style="{ height: '70%' }"
    >
      <div class="filter-popup">
        <div class="popup-title">筛选条件</div>
        
        <div class="filter-section">
          <h3 class="filter-section-title">币种</h3>
          <div class="filter-options">
            <div 
              v-for="item in currencyOptions" 
              :key="item.value"
              :class="['filter-option', popupFilters.currency === item.value ? 'selected' : '']"
              @click="popupFilters.currency = item.value"
            >
              {{ item.label }}
            </div>
          </div>
        </div>
        
        <div class="filter-section">
          <h3 class="filter-section-title">交易类型</h3>
          <div class="filter-options">
            <div 
              v-for="item in typeOptions" 
              :key="item.value"
              :class="['filter-option', popupFilters.type === item.value ? 'selected' : '']"
              @click="popupFilters.type = item.value"
            >
              {{ item.label }}
            </div>
          </div>
        </div>
        
        <div class="filter-section">
          <h3 class="filter-section-title">交易状态</h3>
          <div class="filter-options">
            <div 
              v-for="item in statusOptions" 
              :key="item.value"
              :class="['filter-option', popupFilters.status === item.value ? 'selected' : '']"
              @click="popupFilters.status = item.value"
            >
              {{ item.label }}
            </div>
          </div>
        </div>
        
        <div class="filter-section">
          <h3 class="filter-section-title">时间范围</h3>
          <div class="date-picker">
            <van-cell title="开始日期" :value="formatDate(popupFilters.startDate)" @click="showStartDatePicker = true" />
            <van-cell title="结束日期" :value="formatDate(popupFilters.endDate)" @click="showEndDatePicker = true" />
          </div>
        </div>
        
        <div class="filter-actions">
          <van-button plain block @click="resetFilters">重置</van-button>
          <van-button type="primary" block @click="applyFilters">确认</van-button>
        </div>
      </div>
    </van-popup>
    
    <!-- 日期选择器 -->
    <van-calendar
      v-model:show="showStartDatePicker"
      @confirm="onStartDateConfirm"
      :min-date="minDate"
      :max-date="maxDate"
    />
    
    <van-calendar
      v-model:show="showEndDatePicker"
      @confirm="onEndDateConfirm"
      :min-date="minDate"
      :max-date="maxDate"
    />
    
    <!-- 交易详情弹窗 -->
    <van-popup
      v-model:show="showDetail"
      position="bottom"
      round
      closeable
      close-icon="close"
      :style="{ height: '80%' }"
    >
      <div class="transaction-detail" v-if="currentTransaction">
        <div class="detail-header">
          <div class="detail-type-icon" :class="getIconClass(currentTransaction.transType)">
            <van-icon :name="getIconName(currentTransaction.transType)" size="24" />
          </div>
          <h2 class="detail-title">{{ getTransactionTitle(currentTransaction.transType) }}</h2>
          <div :class="['detail-status-tag', getStatusClass(currentTransaction.status)]">
            {{ getStatusText(currentTransaction.status) }}
          </div>
        </div>
        
        <div class="detail-amount-section">
          <div :class="['detail-amount', getAmountClass(currentTransaction.transType)]">
            {{ getAmountPrefix(currentTransaction.transType) }}{{ formatNumber(currentTransaction.amount) }} {{ currentTransaction.currency }}
          </div>
          <div class="detail-time">{{ formatDateTime(currentTransaction.createdAt) }}</div>
        </div>
        
        <div class="detail-info-list">
          <div class="detail-info-item">
            <span class="info-label">订单号</span>
            <span class="info-value copy-value" @click="copyText(currentTransaction.orderNo)">
              {{ formatOrderNo(currentTransaction.orderNo, true) }}
              <van-icon name="copy-o" />
            </span>
          </div>
          
          <div class="detail-info-item" v-if="currentTransaction.txHash">
            <span class="info-label">交易哈希</span>
            <span class="info-value copy-value" @click="copyText(currentTransaction.txHash)">
              {{ formatHash(currentTransaction.txHash) }}
              <van-icon name="copy-o" />
            </span>
          </div>
          
          <div class="detail-info-item" v-if="currentTransaction.transType === '1' && currentTransaction.fromAddress">
            <span class="info-label">来源地址</span>
            <span class="info-value copy-value" @click="copyText(currentTransaction.fromAddress)">
              {{ formatAddress(currentTransaction.fromAddress) }}
              <van-icon name="copy-o" />
            </span>
          </div>
          
          <div class="detail-info-item" v-if="currentTransaction.transType === '2' && currentTransaction.toAddress">
            <span class="info-label">提现地址</span>
            <span class="info-value copy-value" @click="copyText(currentTransaction.toAddress)">
              {{ formatAddress(currentTransaction.toAddress) }}
              <van-icon name="copy-o" />
            </span>
          </div>
          
          <div class="detail-info-item" v-if="currentTransaction.fee">
            <span class="info-label">手续费</span>
            <span class="info-value">{{ formatNumber(currentTransaction.fee) }} {{ currentTransaction.currency }}</span>
          </div>
          
          <div class="detail-info-item" v-if="currentTransaction.actualAmount">
            <span class="info-label">实际到账</span>
            <span class="info-value">{{ formatNumber(currentTransaction.actualAmount) }} {{ currentTransaction.currency }}</span>
          </div>
          
          <div class="detail-info-item" v-if="currentTransaction.chainId">
            <span class="info-label">网络</span>
            <span class="info-value">{{ getChainName(currentTransaction.chainId) }}</span>
          </div>
          
          <!-- <div class="detail-info-item" v-if="currentTransaction.confirmations">
            <span class="info-label">确认数</span>
            <span class="info-value">{{ currentTransaction.confirmations }}</span>
          </div> -->
          
          <div class="detail-info-item" v-if="currentTransaction.remark">
            <span class="info-label">备注</span>
            <span class="info-value">{{ currentTransaction.remark }}</span>
          </div>
        </div>
        
        <div class="detail-actions" v-if="currentTransaction.txHash">
          <van-button 
            type="primary" 
            block 
            icon="external-link-o"
            @click="viewOnBlockchain(currentTransaction)"
          >
            在区块链浏览器中查看
          </van-button>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { showToast, showLoadingToast, closeToast } from 'vant'
import { getTransactions } from '@/api/cash'
import { formatNumber } from '@/utils/utils'

const router = useRouter()
const route = useRoute()

// 筛选选项
const currencyOptions = [
  { label: '全部币种', value: 'all' },
  { label: 'HDFS', value: 'HDFS' },
  { label: 'USDT', value: 'USDT' },
]

const typeOptions = [
  { label: '全部类型', value: 'all' },
  { label: '充值', value: '1' },
  { label: '提现', value: '2' }
]

const statusOptions = [
  { label: '全部状态', value: 'all' },
  { label: '待处理', value: '0' },
  { label: '已审核', value: '1' },
  { label: '已拒绝', value: '2' },
  { label: '已完成', value: '3' },
  { label: '已失败', value: '4' }
]

// 链名称映射
const chainNames = {
  '1': 'Ethereum',
  '56': 'BSC',
  '137': 'Polygon',
  '42161': 'Arbitrum',
  '10': 'Optimism',
  '43114': 'Avalanche'
}

// 列表状态
const refreshing = ref(false)
const loading = ref(false)
const finished = ref(false)
const page = ref(1)
const pageSize = ref(10)
const totalItems = ref(0)

// 筛选状态
const selectedCurrency = ref(route.query.currency || 'all')
const selectedType = ref(route.query.type || 'all')
const showFilter = ref(false)
const popupFilters = ref({
  currency: 'all',
  type: 'all',
  status: 'all',
  startDate: null,
  endDate: null
})

// 日期选择器
const showStartDatePicker = ref(false)
const showEndDatePicker = ref(false)
const minDate = new Date(new Date().getFullYear() - 1, 0, 1)
const maxDate = new Date()

// 交易详情
const showDetail = ref(false)
const currentTransaction = ref(null)

// 交易数据
const transactions = ref([])

// 选择币种
const selectCurrency = (currency) => {
  selectedCurrency.value = currency
  // 更新URL参数
  updateUrlParams()
  // 重新加载数据
  loadTransactions(true)
}

// 选择类型
const selectType = (type) => {
  selectedType.value = type
  // 更新URL参数
  updateUrlParams()
  // 重新加载数据
  loadTransactions(true)
}

// 更新URL参数
const updateUrlParams = () => {
  router.replace({
    query: {
      ...route.query,
      currency: selectedCurrency.value,
      type: selectedType.value
    }
  })
}

// 加载交易记录
const loadTransactions = async (isRefresh = false) => {
  if (isRefresh) {
    page.value = 1
    transactions.value = []
  }
  
  loading.value = true
  
  try {
    const params = {
      currency: selectedCurrency.value !== 'all' ? selectedCurrency.value : '',
      transType: selectedType.value !== 'all' ? selectedType.value : '',
      status: popupFilters.value.status !== 'all' ? popupFilters.value.status : '',
      startDate: popupFilters.value.startDate ? formatDate(popupFilters.value.startDate) : '',
      endDate: popupFilters.value.endDate ? formatDate(popupFilters.value.endDate) : '',
      page: page.value,
      size: pageSize.value
    }
    
    const res = await getTransactions(params)
    
    if (res.code === 0 && res.data) {
      if (isRefresh) {
        transactions.value = res.data.list || []
      } else {
        transactions.value = [...transactions.value, ...(res.data.list || [])]
      }
      
      totalItems.value = res.data.total || 0
      finished.value = transactions.value.length >= totalItems.value
      page.value++
    } else {
      showToast(res.message || '获取交易记录失败')
      finished.value = true
    }
  } catch (error) {
    console.error('获取交易记录出错:', error)
    showToast('获取交易记录出错')
    finished.value = true
  } finally {
    loading.value = false
    if (isRefresh) {
      refreshing.value = false
    }
  }
}

// 下拉刷新
const onRefresh = () => {
  loadTransactions(true)
}

// 上拉加载
const onLoad = () => {
  loadTransactions()
}

// 显示筛选弹窗
const showFilterPopup = () => {
  // 初始化弹窗筛选条件
  popupFilters.value = {
    currency: selectedCurrency.value,
    type: selectedType.value,
    status: 'all',
    startDate: null,
    endDate: null
  }
  showFilter.value = true
}

// 重置筛选条件
const resetFilters = () => {
  popupFilters.value = {
    currency: 'all',
    type: 'all',
    status: 'all',
    startDate: null,
    endDate: null
  }
}

// 应用筛选条件
const applyFilters = () => {
  selectedCurrency.value = popupFilters.value.currency
  selectedType.value = popupFilters.value.type
  
  // 更新URL参数
  updateUrlParams()
  
  // 关闭弹窗
  showFilter.value = false
  
  // 重新加载数据
  loadTransactions(true)
}

// 日期选择器确认
const onStartDateConfirm = (date) => {
  popupFilters.value.startDate = date
  showStartDatePicker.value = false
}

const onEndDateConfirm = (date) => {
  popupFilters.value.endDate = date
  showEndDatePicker.value = false
}

// 格式化日期
const formatDate = (date) => {
  if (!date) return '请选择'
  return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`
}

// 格式化日期时间
const formatDateTime = (dateTimeStr) => {
  if (!dateTimeStr) return ''
  
  // 处理后端返回的日期时间字符串
  const date = new Date(dateTimeStr)
  return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`
}

// 显示交易详情
const showTransactionDetail = (transaction) => {
  currentTransaction.value = transaction
  showDetail.value = true
}

// 获取交易类型图标类名
const getIconClass = (type) => {
  return {
    '1': 'icon-deposit',
    '2': 'icon-withdraw'
  }[type] || ''
}

// 获取交易类型图标
const getIconName = (type) => {
  return {
    '1': 'peer-pay',
    '2': 'cash-back-record'
  }[type] || 'records'
}

// 获取交易类型标题
const getTransactionTitle = (type) => {
  return {
    '1': '充值',
    '2': '提现'
  }[type] || '未知交易'
}

// 获取金额前缀
const getAmountPrefix = (type) => {
  return type === '2' ? '-' : type === '1' ? '+' : ''
}

// 获取金额样式类
const getAmountClass = (type) => {
  return {
    '1': 'amount-increase',
    '2': 'amount-decrease'
  }[type] || ''
}

// 获取状态文本
const getStatusText = (status) => {
  return {
    '0': '待处理',
    '1': '已审核',
    '2': '已拒绝',
    '3': '已完成',
    '4': '已失败'
  }[status] || '未知状态'
}

// 获取状态样式类
const getStatusClass = (status) => {
  return {
    '0': 'status-pending',
    '1': 'status-processing',
    '2': 'status-rejected',
    '3': 'status-completed',
    '4': 'status-failed'
  }[status] || ''
}

// 获取链名称
const getChainName = (chainId) => {
  return chainNames[chainId] || `Chain ${chainId}`
}

// 格式化地址显示
const formatAddress = (address) => {
  if (!address) return ''
  return address.substring(0, 6) + '...' + address.substring(address.length - 4)
}

// 格式化订单号显示
const formatOrderNo = (orderNo, truncate = true) => {
  if (!orderNo) return ''
  if (!truncate) return orderNo // 详情页面显示完整订单号
  return orderNo.substring(0, 8) + '...' + orderNo.substring(orderNo.length - 4)
}

// 格式化哈希显示
const formatHash = (hash) => {
  if (!hash) return ''
  return hash.substring(0, 6) + '...' + hash.substring(hash.length - 4)
}

// 复制文本
const copyText = (text) => {
  if (!text) return
  
  navigator.clipboard.writeText(text)
    .then(() => {
      showToast('已复制')
    })
    .catch(() => {
      showToast('复制失败，请手动复制')
    })
}

// 在区块链浏览器中查看
const viewOnBlockchain = (transaction) => {
  if (!transaction.txHash) return
  
  let explorerUrl = ''
  
  // 根据链ID确定区块链浏览器
  switch (transaction.chainId) {
    case '1':
      explorerUrl = `https://etherscan.io/tx/${transaction.txHash}`
      break
    case '56':
      explorerUrl = `https://bscscan.com/tx/${transaction.txHash}`
      break
    case '137':
      explorerUrl = `https://polygonscan.com/tx/${transaction.txHash}`
      break
    case '42161':
      explorerUrl = `https://arbiscan.io/tx/${transaction.txHash}`
      break
    case '10':
      explorerUrl = `https://optimistic.etherscan.io/tx/${transaction.txHash}`
      break
    case '43114':
      explorerUrl = `https://snowtrace.io/tx/${transaction.txHash}`
      break
    default:
      explorerUrl = `https://etherscan.io/tx/${transaction.txHash}`
  }
  
  window.open(explorerUrl, '_blank')
}

// 返回上一页
const goBack = () => {
  router.back()
}

// 监听筛选条件变化
watch(
  [selectedCurrency, selectedType],
  () => {
    // 当筛选条件变化时，更新URL参数
    updateUrlParams()
  }
)

// 初始化
onMounted(() => {
  // 如果有URL参数，应用筛选条件
  if (route.query.currency) {
    selectedCurrency.value = route.query.currency
  }
  
  if (route.query.type) {
    selectedType.value = route.query.type
  }
  
  // 加载交易记录
  loadTransactions()
})
</script>

<style scoped>
.transactions-container {
  min-height: 100vh;
  background-color: #f5f7fa;
  padding-bottom: 24px;
}

/* 顶部导航 */
.header {
  display: flex;
  align-items: center;
  padding: 16px;
  background-color: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  position: sticky;
  top: 0;
  z-index: 100;
}

.back-button, .filter-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  cursor: pointer;
  color: #334155;
  background: transparent;
  border: none;
  padding: 0;
}

.header-title {
  flex: 1;
  font-size: 18px;
  font-weight: 600;
  color: #1e293b;
  text-align: center;
  margin: 0;
}

/* 交易统计卡片 */
.stats-card {
  margin: 16px;
  background: white;
  border-radius: 12px;
  padding: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.stats-header {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.stats-title {
  font-size: 16px;
  font-weight: 600;
  color: #1e293b;
  margin-bottom: 12px;
}

.stats-tabs {
  display: flex;
  background-color: #f1f5f9;
  border-radius: 24px;
  padding: 4px;
  width: 100%;
  max-width: 300px;
}

.stats-tab {
  flex: 1;
  text-align: center;
  padding: 8px 0;
  font-size: 14px;
  color: #64748b;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.3s;
}

.stats-tab.active {
  background-color: #3b82f6;
  color: white;
  font-weight: 500;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}

/* 币种选择器 */
.currency-selector {
  margin: 16px 0;
  padding: 0 16px;
}

.currency-scroll {
  display: flex;
  overflow-x: auto;
  gap: 12px;
  padding: 8px 0;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
}

.currency-scroll::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

.currency-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 70px;
  cursor: pointer;
}

.currency-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, #64748b, #475569);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 8px;
  transition: all 0.3s;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.all-icon {
  background: linear-gradient(135deg, #94a3b8, #64748b);
}

.currency-item.active .currency-icon {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
  transform: scale(1.05);
}

.currency-name {
  font-size: 12px;
  color: #64748b;
  text-align: center;
}

.currency-item.active .currency-name {
  color: #3b82f6;
  font-weight: 500;
}

/* 交易列表 */
.transaction-list {
  padding: 0 16px;
}

.transaction-item {
  display: flex;
  padding: 16px;
  background-color: white;
  border-radius: 12px;
  margin-bottom: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  cursor: pointer;
  transition: transform 0.2s;
  position: relative;
  overflow: hidden;
}

.transaction-item:active {
  transform: scale(0.98);
}

.transaction-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
}

.icon-deposit::before {
  background-color: #10b981;
}

.icon-withdraw::before {
  background-color: #ef4444;
}

.transaction-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16px;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.icon-deposit {
  background: linear-gradient(135deg, #10b981, #059669);
}

.icon-deposit .van-icon {
  color: white;
  font-size: 24px;
}

.icon-withdraw {
  background: linear-gradient(135deg, #ef4444, #dc2626);
}

.icon-withdraw .van-icon {
  color: white;
  font-size: 24px;
}

.transaction-info {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.transaction-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.transaction-title {
  font-size: 16px;
  font-weight: 600;
  color: #1e293b;
}

.transaction-amount {
  font-size: 18px;
  font-weight: 700;
}

.amount-increase {
  color: #10b981;
}

.amount-decrease {
  color: #ef4444;
}

.transaction-middle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.transaction-order {
  font-size: 12px;
  color: #64748b;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 60%;
}

.transaction-hash {
  font-size: 12px;
  color: #3b82f6;
  display: flex;
  align-items: center;
  gap: 2px;
}

.transaction-hash .van-icon {
  font-size: 12px;
}

.transaction-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.transaction-date {
  font-size: 13px;
  color: #94a3b8;
}

.transaction-status {
  font-size: 12px;
  padding: 3px 10px;
  border-radius: 20px;
  font-weight: 500;
}

.status-completed {
  background-color: #dcfce7;
  color: #16a34a;
}

.status-pending {
  background-color: #fef3c7;
  color: #d97706;
}

.status-failed {
  background-color: #fee2e2;
  color: #dc2626;
}

.status-processing {
  background-color: #dbeafe;
  color: #2563eb;
}

.status-rejected {
  background-color: #fecaca;
  color: #b91c1c;
}

/* 筛选弹窗 */
.filter-popup {
  padding: 24px 16px;
}

.popup-title {
  font-size: 20px;
  font-weight: 700;
  color: #1e293b;
  text-align: center;
  margin-bottom: 24px;
  position: relative;
}

.popup-title::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 3px;
  background-color: #3b82f6;
  border-radius: 3px;
}

.filter-section {
  margin-bottom: 24px;
}

.filter-section:last-child {
  margin-bottom: 32px;
}

.filter-section-title {
  font-size: 16px;
  font-weight: 600;
  color: #334155;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
}

.filter-section-title::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 16px;
  background-color: #3b82f6;
  margin-right: 8px;
  border-radius: 2px;
}

.filter-options {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.filter-option {
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 14px;
  color: #64748b;
  background-color: #f1f5f9;
  cursor: pointer;
  transition: all 0.3s;
  border: 1px solid transparent;
}

.filter-option:active {
  transform: scale(0.95);
}

.filter-option.selected {
  color: #3b82f6;
  background-color: #eff6ff;
  border-color: #3b82f6;
  font-weight: 500;
}

.date-picker {
  background-color: #f8fafc;
  border-radius: 12px;
  overflow: hidden;
  margin-top: 8px;
}

.filter-actions {
  display: flex;
  gap: 12px;
  margin-top: 16px;
}

.filter-actions .van-button {
  flex: 1;
  border-radius: 8px;
  height: 44px;
  font-size: 16px;
  font-weight: 500;
}

/* 交易详情弹窗 */
.transaction-detail {
  padding: 24px 16px;
}

.detail-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 24px;
  position: relative;
}

.detail-type-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.detail-title {
  font-size: 20px;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 12px;
}

.detail-status-tag {
  padding: 4px 16px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 500;
}

.detail-amount-section {
  background: linear-gradient(135deg, #f8fafc, #f1f5f9);
  border-radius: 16px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 24px;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
}

.detail-amount {
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 8px;
}

.detail-time {
  font-size: 14px;
  color: #64748b;
}

.detail-info-list {
  background-color: white;
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.detail-info-item {
  display: flex;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid #f1f5f9;
}

.detail-info-item:last-child {
  border-bottom: none;
}

.info-label {
  font-size: 14px;
  color: #64748b;
}

.info-value {
  font-size: 14px;
  color: #334155;
  text-align: right;
  font-weight: 500;
  max-width: 60%;
  word-break: break-all;
}

.copy-value {
  display: flex;
  align-items: center;
  cursor: pointer;
  color: #3b82f6;
}

.copy-value .van-icon {
  margin-left: 6px;
  color: #3b82f6;
}

.detail-actions {
  padding: 0 16px;
}

.detail-actions .van-button {
  border-radius: 12px;
  height: 48px;
  font-size: 16px;
  font-weight: 500;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}
</style>
